<template>
  <view class="third-party-container">
    <!-- 导航栏 -->
    <u-navbar title="第三方绑定管理" left-icon="arrow-left" leftIconColor="#ffffff" leftIconSize="40rpx" bg-color="transparent" :border="false" title-style="color: #ffffff;font-weight: bold;" @leftClick="goBack" />

    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 白色卡片 -->
      <view class="binding-card">
        <!-- 头部区域 -->
        <view class="header">
          <view class="title-section">
            <text class="title">第三方绑定管理</text>
            <text class="subtitle">管理您的第三方账号绑定</text>
          </view>
        </view>

        <!-- 绑定列表 -->
        <view class="binding-list">
          <!-- 微信绑定 -->
          <view class="binding-item">
            <view class="platform-info">
              <view class="platform-icon">
                <image class="icon" src="/static/login/wx.png" mode="aspectFit" />
              </view>
              <view class="platform-details">
                <text class="platform-name">微信</text>
                <text class="platform-status" :class="{ bound: bindingStatus.wechat }">
                  {{ bindingStatus.wechat ? '已绑定' : '未绑定' }}
                </text>
              </view>
            </view>
            <view class="binding-action">
              <up-button
                :type="bindingStatus.wechat ? 'error' : 'primary'"
                :text="bindingStatus.wechat ? '解绑' : '绑定'"
                size="mini"
                :custom-style="{
                  width: '120rpx',
                  height: '60rpx',
                  fontSize: '24rpx'
                }"
                @click="handleWechatBinding"
              />
            </view>
          </view>

          <!-- QQ绑定 -->
          <view class="binding-item">
            <view class="platform-info">
              <view class="platform-icon">
                <image class="icon" src="/static/login/qq.png" mode="aspectFit" />
              </view>
              <view class="platform-details">
                <text class="platform-name">QQ</text>
                <text class="platform-status" :class="{ bound: bindingStatus.qq }">
                  {{ bindingStatus.qq ? '已绑定' : '未绑定' }}
                </text>
              </view>
            </view>
            <view class="binding-action">
              <up-button
                :type="bindingStatus.qq ? 'error' : 'primary'"
                :text="bindingStatus.qq ? '解绑' : '绑定'"
                size="mini"
                :custom-style="{
                  width: '120rpx',
                  height: '60rpx',
                  fontSize: '24rpx'
                }"
                @click="handleQQBinding"
              />
            </view>
          </view>
        </view>

        <!-- 提示信息 -->
        <view class="tips-section">
          <text class="tips-text">绑定第三方账号后，您可以使用该账号快速登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 模拟绑定状态
      bindingStatus: {
        wechat: true, // 微信已绑定
        qq: false // QQ未绑定
      }
    };
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 处理微信绑定/解绑
    handleWechatBinding() {
      if (this.bindingStatus.wechat) {
        this.unbindAccount('微信', 'wechat');
      } else {
        this.bindAccount('微信', 'wechat');
      }
    },

    // 处理QQ绑定/解绑
    handleQQBinding() {
      if (this.bindingStatus.qq) {
        this.unbindAccount('QQ', 'qq');
      } else {
        this.bindAccount('QQ', 'qq');
      }
    },

    // 绑定账号
    bindAccount(platformName, platformKey) {
      uni.showModal({
        title: '确认绑定',
        content: `确定要绑定${platformName}账号吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '绑定中...'
            });

            // 模拟绑定过程
            setTimeout(() => {
              uni.hideLoading();
              this.bindingStatus[platformKey] = true;
              uni.showToast({
                title: `${platformName}绑定成功`,
                icon: 'success'
              });
            }, 1500);
          }
        }
      });
    },

    // 解绑账号
    unbindAccount(platformName, platformKey) {
      uni.showModal({
        title: '确认解绑',
        content: `确定要解绑${platformName}账号吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '解绑中...'
            });

            // 模拟解绑过程
            setTimeout(() => {
              uni.hideLoading();
              this.bindingStatus[platformKey] = false;
              uni.showToast({
                title: `${platformName}解绑成功`,
                icon: 'success'
              });
            }, 1500);
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.third-party-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #4a90e2 20%, #ffffff 50%);
  position: relative;
}

.main-content {
  padding: 40rpx 40rpx;
  min-height: calc(100vh - 88rpx);
  padding-top: calc(70px + 44px + var(--status-bar-height));
  box-sizing: border-box;
}

.binding-card {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 60rpx 40rpx;
}

.header {
  margin-bottom: 60rpx;
}

.title-section {
  text-align: center;
}

.title {
  font-size: 48rpx;
  line-height: 50rpx;
  font-weight: bold;
  color: #000000;
  display: block;
  margin-bottom: 16rpx;
}

.subtitle {
  font-size: 28rpx;
  line-height: 30rpx;
  color: #999999;
  display: block;
}

.binding-list {
  margin-bottom: 60rpx;
}

.binding-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 0;
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }
}

.platform-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.platform-icon {
  margin-right: 24rpx;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;

  .icon {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
  }
}

.platform-details {
  display: flex;
  flex-direction: column;
}

.platform-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
  margin-bottom: 8rpx;
}

.platform-status {
  font-size: 24rpx;
  color: #999999;

  &.bound {
    color: #4a90e2;
  }
}

.binding-action {
  margin-left: 20rpx;
}

.tips-section {
  text-align: center;
  padding: 20rpx 0;
}

.tips-text {
  font-size: 24rpx;
  color: #999999;
  line-height: 1.5;
}
</style>
